<template>
	<view class="container">
		<view class="content pad30">
			<view class="wztitle">{{row.name}}</view>
			<view class="wztime"><text>#{{cate.name}}</text>{{row.time}}</view>
			<view class="wzbox"><rich-text :nodes="row.content"></rich-text></view>
			<view class="wzlook"><text class="iconfont icon-chakan"></text>{{row.views}} 人阅读</view>
		</view>
		<view class="goodscontent bordt20" v-for="(item,index) in shops" :key="item.id">
			<view class="company_dl">
				<view class="company_dt">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="company_dd">
					<view class="company_name" @tap="shopdetail" :data-index="index">{{item.name}}</view>
					<view class="company_txt" @tap="shopdetail" :data-index="index">{{item.desc}}</view>
					<view class="company_tel" @tap="call" :data-index="index"><text
							class="iconfont icon-dianhua"></text>拨打电话</view>
				</view>
				<view class="company_ico"></view>
			</view>
			<view class="company_map" @tap="map" :data-index="index">
				<view class="company_mapl"><text class="iconfont icon-icon-GIS_dizhi"></text>{{item.address}}</view>
				<view class="company_mapr"><text class="iconfont icon-daohang"></text>导航</view>
			</view>

		</view>

		<view class="news_list">
			<view class="ctitlebox">
				<view class="ctitle">相关推荐</view>
			</view>
			<block v-for="(item,index) in relate" :key="index">
				<navigator hover-class="none" open-type="redirect" :url="'/pages/newsdetail/newsdetail?id='+item.id">
					<view class="news_li">
						<view class="newsli_title">{{item.name}}</view>
						<view class="newsli_txt">{{item.desc}}</view>
						<view class="newsli_img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="newsli_bot">
							<view class="newsli_lable">#{{item.cate.name}}</view>
							<view class="newsli_look"><text class="iconfont icon-chakan"></text>{{item.views}} 人阅读
							</view>
						</view>
					</view>
				</navigator>
			</block>
		</view>
		<!--<view class="bottombox">
			<view class="botbtn" @tap="yuyuebtn()">立即预约</view>
			<view class="botbtn zxbtn" @tap="homebtn()">进入门诊首页</view>
		</view>-->
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				row: [],
				cate: [],
				shops: [],
				relate: []
			}
		},
		onLoad(e) {
			var $this = this
			API.post("common/newsdetail", {
				id: e.id
			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
					$this.cate = res.data.cate
				}
			})
			API.post("common/getshops").then((res) => {
				if (res.code == 1) {
					$this.shops = res.data
				}
			})
			API.post("common/newsrelate", {
				id: e.id
			}).then((res) => {
				if (res.code == 1) {
					$this.relate = res.data
				}
			})
		},
		//分享到微信
		onShareAppMessage() {
			return {
				title: this.row.name,
				imageUrl: this.imgurl + this.row.image,
				path: "/pages/newsdetail/newsdetail?id=" + this.row.id
			};
		},
		//小程序分享到朋友圈
		onShareTimeline() {
			return {
				title: this.row.name,
				imageUrl: this.imgurl + this.row.image,
				query: "/pages/newsdetail/newsdetail?id=" + this.row.id
			};
		},
		methods: {
			shopdetail(e) {
				var index = e.currentTarget.dataset.index;
				uni.navigateTo({
					url: "/pages/user/about/about?id=" + this.shops[index].id
				})
			},
			call(e) {
				var index = e.currentTarget.dataset.index;
				uni.makePhoneCall({
					phoneNumber: this.shops[index].mobile
				});
			},
			map(e) {
				var index = e.currentTarget.dataset.index;
				if (this.shops[index].jing && this.shops[index].wei) {
					// #ifdef H5
					let url =
						`https://apis.map.qq.com/tools/routeplan/eword=${address}&epointx=${latitude}&epointy=$					{longitude}?referer=${应用名称}&key=${腾讯地图的key}`
					window.location.href = url
					// #endif
					// #ifndef H5
					uni.openLocation({
						latitude: Number(this.shops[index].wei),
						longitude: Number(this.shops[index].jing),
						name: this.shops[index].name || '',
						address: this.shops[index].address
					});
					// #endif
				}
			},
			homebtn() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			yuyuebtn() {
				uni.switchTab({
					url: '/pages/doctor/doctor'
				})
			},

		}
	}
</script>

<style lang="scss">
	@import '@/static/style.css';

	.container {
		padding-bottom: 130rpx;
	}

	.wztitle {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.wztime {
		color: #999;
		margin-top: 20rpx;
	}

	.wztime text {
		color: $color;
		margin-right: 20rpx;
	}

	.wzbox {
		font-size: 28rpx;
		line-height: 50rpx;
		padding: 40rpx 0;
		width: 100%;
		overflow: hidden;
	}

	.wzlook {
		padding: 30rpx 0;
		color: #9297aa;
		border-top: 2rpx #eee solid;
	}

	.wzlook text {
		margin-right: 10rpx;
		font-size: 36rpx;
		float: left;
	}

	.goodscontent {
		padding: 30rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.news_list {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx;
		background: #f7f7f7;
	}

	.news_li {
		background: #fff;
		border-radius: 20rpx;
		padding: 26rpx;
		margin-top: 24rpx;
	}

	.newsli_title {
		font-size: 28rpx;
		font-weight: bold;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.newsli_txt {
		color: #999;
		margin-top: 16rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.newsli_img {
		width: 100%;
		height: 230rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.newsli_img image {
		width: 100%;
		height: 100%;
	}

	.newsli_bot {
		width: 100%;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.newsli_lable {
		float: left;
		color: $color;
	}

	.newsli_look {
		float: right;
		color: #9297aa;
	}

	.newsli_look text {
		margin-right: 10rpx;
		font-size: 36rpx;
		float: left;
	}

	.bottombox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0px 0 30rpx 0px rgba(0, 0, 0, 0.06);
		background: #fff;
		display: flex;
	}

	.botbtn {
		flex: 1;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 130rpx;
		background: $color;
		text-align: center;
	}

	.botbtn.zxbtn {
		background: #4dd1a2;
	}
</style>